<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{register.title}"></title>
    <script th:inline="javascript">

        $(function () {
            console.log("页面加载完成，初始化表单提交事件");

            // 提交注册表单
            $("#register-form-id").submit(function (e) {
                console.log("表单提交事件触发");
                e.preventDefault(); // 阻止默认提交
                // 打印表单数据
                var formData = $(this).serialize();
                console.log("表单数据: " + formData);
                // 简单表单验证
                var inputs = $(this).find(".form-control");
                console.log("开始表单验证，共有" + inputs.length + "个输入字段");
                for (var i = 0; i < inputs.length; i++) {
                    console.log("字段" + inputs[i].name + "值: " + inputs[i].value);
                    if (!inputs[i].checkValidity()) {
                        console.log("字段验证失败: " + inputs[i].name);
                        inputs[i].reportValidity();
                        return ;
                    }
                }
                console.log("表单验证通过");
                // 验证密码一致性
                var password = $("#password").val();
                var confirmPassword = $("#confirmPassword").val();
                if (password !== confirmPassword) {
                    console.log("密码不一致");
                    alert("两次输入的密码不一致");
                    return ;
                }
                console.log("密码一致，准备提交表单");

                // 验证通过，手动提交表单
                this.submit();
                console.log("表单已提交");
            });
        }) // end ready 方法
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > article {
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section {
            flex-grow: 1;
            display: flex;

        }

        body > article > form {
            flex-basis: 300px;
            margin-right: 30px;
        }

        #register-submit-id, #send-code-btn {
            width: 100%;
        }
    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/login/register(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/register(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="register-form-id" method="post" th:action="@{/login/register}">
        <!--/*@thymesVar id="errorMessage" type=""*/-->
        <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

        <div class="form-group">
            <span th:text="#{register.user.name}"></span>
            <input class="form-control" name="username" id="username"
                   th:placeholder="#{register.user.name.plch}"
                   th:title="#{register.user.name.plch}"
                   pattern="^.{4,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{register.user.password}"></span>
            <input class="form-control" name="password" id="password" type="password"
                   th:placeholder="#{register.password.plch}"
                   th:title="#{register.password.plch}"
                   pattern="^.{6,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{register.user.confirm.password}"></span>
            <input class="form-control" name="confirmPassword" id="confirmPassword" type="password"
                   th:placeholder="#{register.confirm.password.plch}"
                   th:title="#{register.confirm.password.plch}"
                   pattern="^.{6,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{register.user.phone}"></span>
            <input class="form-control" name="phone" id="phone"
                   th:placeholder="#{register.phone.plch}"
                   th:title="#{register.phone.plch}"
                   pattern="^1[3-9]\d{9}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{register.user.verification.code}"></span>
            <div class="input-group">
                <input class="form-control" name="verificationCode" id="verificationCode"
                       th:placeholder="#{register.verification.code.plch}"
                       th:title="#{register.verification.code.plch}"
                       pattern="^\d{4}$"
                       style="width: 50%;"
                >
                <img id="verifyImg" th:src="@{/login/getVerifyImag}" alt="验证码" style="width: 30%; height: 38px; cursor: pointer;" title="点击刷新">
            </div>
            <script th:inline="javascript">
                // 刷新验证码
                document.getElementById('verifyImg').onclick = function() {
                    this.src = /*[[@{/login/getVerifyImag}]]*/ '/login/getVerifyImag?' + Math.random();
                };
            </script>
        </div>

        <button type="submit" id="register-submit-id" class="btn btn-success btn-group-lg" th:text="#{register.submit}"></button>
        <a id="back-to-login" class="btn btn-primary btn-group-lg" th:href="@{/login/login}" th:text="#{register.back.to.login}"></a>
    </form>

</article>
</body>
</html>